<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <style type="text/css">
  table{
  	border: 1px;
  	
  }
  .commentPhoto{
  	widows: 50p;
  	height: 50px;
  }
  #profile{
  	width: 100px;
  	height: 100px;
  }
 </style>
 <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
	  commentList();
	$('#deleteBoard').on('click',function(){
		if (confirm("삭제하시겠습니까?")) {
			location.href = "/mamma/sanghyun/deleteBoard.action?boardNum=<s:property value='boardVo.boardNum'/>";
		
		}
	});
	
	$('#updateBoard').on('click',function(){
		if (confirm("수정하시겠습니까?")) {
			location.href = "/mamma/sanghyun/updateBoardForm.action?boardNum=<s:property value='boardVo.boardNum'/>";
		}
	});
	$('#writeComment').on('click', function() {
		 var boardNum = "<s:property value='boardVo.boardNum'/>";
		 var content = $('#commentContent').val();
		 $.ajax({
	          url: '/mamma/sanghyun/writeComment.action',
	          type:'post',
	          data:{content:content,boardNum:boardNum},
	          dataType: 'json',
	          success: output
	       });
		 $('#commentContent').val('');
	});
	
	$('#ListBoard').on('click',function(){
		location.href = "goBoardList.action";
	});
	
});
  
	 function commentList() {
			 var boardNum = "<s:property value='boardVo.boardNum'/>";
			
			 $.ajax({
		          url: '/mamma/sanghyun/commentList.action',
		          type:'post',
		          data:{boardNum:boardNum},
		          dataType: 'json',
		          success: output
		       });
	} 
	 function output(msg) {
	 	$('#commentDiv').html('');
	 	 var email = '<s:property value="#session.login.email" />';
	 	var str = '<table>';
	 		$.each(msg.commentList, function(key, item){
	 			str += '<tr><td><img src="../photoData/'+item.savedFile+'" class="commentPhoto">';
	 			str += '</td><td>'+item.nickname;
	 			str += '</td><td>'+item.content;
	 			str += '</td><td>'+item.inputdate+'</td>';
	 			if (email == item.email) {
		 			str += '<td><input type="button" value="삭제" class="commentDelete" data-Num="'+item.commentNum+'" boardNum="'+item.boardNum+'"></td>';
				}
	 			
	 		});
		str +='</table>'; 
		$('#commentDiv').html(str);
		
		$('.commentDelete').on('click',deleteComment);
	}
	 function deleteComment() {
		 var commentNum = $(this).attr('data-Num');
		 var boardNum = "<s:property value='boardVo.boardNum'/>";
		 if (confirm("댓글을 삭제하시겠습니까?")) {
			 $.ajax({
		          url: '/mamma/sanghyun/deleteComment.action',
		          type:'post',
		          data:{commentNum:commentNum,boardNum:boardNum},
		          dataType: 'json',
		          success: output
		       });
		}
	}
	 
 </script>
</head>
<body>
<div align="center">
	<table border="1" cellspacing="3" cellpadding="3" align="center" width="700">
		<tr>
			<td rowspan="2"><img src="../photoData/${savedFile}" id="profile"> </td><td><s:property value="boardVo.nickname"/></td>
			
		</tr>
		<tr>
			<td><s:property value="boardVo.inputdate"/></td>		
		</tr>
		<tr>
			<th>제목 </th>
			<td><s:property value="boardVo.title"/></td>
		</tr>
		<tr>
			<th>조회수 </th>
			<td><s:property value="boardVo.viewCount"/></td>
		</tr>
		<tr>
			<th colspan="2">내용 </th> 
		</tr>
		<tr><td colspan="2"><s:property value="boardVo.content"/></td></tr>
	</table>
	
	<s:if test="#{session.login.email} == #{boardVo.email}">
		<input type="button" value="삭제" id="deleteBoard">
		<input type="button" value="수정" id="updateBoard">
		<input type="button" value="목록으로" id="ListBoard">
	</s:if>
	<div id="commentDiv"></div>
	<input type="text" id="commentContent"><input type="button" value="입력" id="writeComment">
</div>
</body>
</html>